<template>
  <x-card hide-search class="h-full">
    <template #title>
      <el-space>
        <x-button bus-type="view" type="primary" @click="methods.view"></x-button>
      </el-space>
      <el-space>
        <el-input v-model="condition.path" placeholder="访问路径"></el-input>
        <el-date-picker
          type="daterange"
          v-model="condition.timeRange"
          value-format="YYYY-MM-DD 00:00:00"
          range-separator="到"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
        ></el-date-picker>
        <el-input v-model="condition.params" placeholder="参数"></el-input>
        <x-button bus-type="query" @click="methods.query"></x-button>
      </el-space>
    </template>
    <template #main>
      <x-table v-model:selection="table.selection" v-bind="table" @page-change="methods.tablePageChange"></x-table>
      <log-viewer v-model:visable="editor.visable" v-bind="editor"></log-viewer>
    </template>
  </x-card>
</template>
<script lang="ts" setup>
import { LogService } from '~/service/sys'
import { ITableColumn } from '~/components/xview/table/ITableColumn'
import { reactive } from 'vue'
import { LogQueryCondition } from '~/types/sys/LogQueryCondition'
import elpUtil from '~/utils/elp'
import { RequestLog } from '~/types/sys/RequestLog'
import { initTable } from '~/hooks/TableHooks'
import { EditorHooks } from '~/hooks'
import LogViewer from './viewer.vue'

const editor = EditorHooks.init<RequestLog>()

const condition = reactive<LogQueryCondition>(new LogQueryCondition())

const methods = {
  view() {
    if (table.selection.length == 0) {
      elpUtil.msg.warning('请先选择需要查看的数据行')
      return
    }
    editor.view(table.selection[0])
  },
  async query() {
    const data = await LogService.query(condition)
    table.pageCurrent = data.currentPage
    table.recordsTotal = data.recordsTotal
    table.tableData = data.data
  },
  tablePageChange(page: number) {
    condition.paging.current = page
    methods.query()
  }
}

const table = initTable<RequestLog>([
  {
    label: '访问路径',
    prop: 'requestPath',
    width: 200
  },
  {
    label: '访问时间',
    prop: 'requestTime',
    width: 200
  },
  {
    label: 'IP',
    prop: 'requestIp',
    width: 100
  },
  {
    label: '用户',
    prop: 'userName',
    width: 100
  },
  {
    label: '参数',
    prop: 'params'
  }
] as ITableColumn[])

methods.query()
</script>
